<template>
  <grid title="基础设置">
    <el-form ref="form"
             style="text-align: left; width:1000px"
             label-width="100px"
             @submit.native.prevent="onFormSubmit"
             :model="form"
             :rules="rules">
      <el-form-item label="网站标题"
                    prop="title">
        <el-input v-model="form.title"
                  placeholder="请输入标题，限20个字「title」"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="简介"
                    prop="description">
        <el-input v-model="form.description"
                  placeholder="请输入简介，限50个字「meta=description」"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="关键词"
                    prop="keywords">
        <el-tag v-for="(tag,index) in form.keywords"
                :key="index"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
          {{tag}}
        </el-tag>
        <template v-if="inputVisible">
          <el-input class="input-new-tag"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @blur="handleInputConfirm">
          </el-input>
        </template>
        <template v-else>
          <el-button class="button-new-tag"
                     size="small"
                     @click="showInput">+ New</el-button>
        </template>
      </el-form-item>
      <el-form-item label="网站logo"
                    prop="logo">
        <image-input type="other"
                     v-model="form.logo"></image-input>
        <p class="caption">注：建议上传尺寸60*60的 PNG图</p>
      </el-form-item>
      <el-form-item label="网站维护">
        <el-checkbox v-model="form.repair">开启</el-checkbox>
        <p class="caption">勾选后打开网站将显示维护界面</p>
      </el-form-item>
      <el-form-item label="备案号"
                    prop="record">
        <el-input v-model="form.record"
                  placeholder="请输入备案号"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="备案链接"
                    prop="record_url">
        <el-input v-model="form.record_url"
                  placeholder="请输入备案跳转网址"
                  clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   native-type="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </grid>
</template>

<script>
import imageInput from '@/components/image-input'
import { mapActions, mapGetters } from 'vuex'
import { deepCopy } from '@/utils/common'

export default {
  title () {
    return '基础设置'
  },
  data () {
    return {
      inputVisible: false,
      inputValue: '',
      form: {
        title: undefined,
        description: undefined,
        keywords: ['文章', 'PHP'],
        logo: [],
        repair: false,
        record: undefined,
        record_url: undefined
      },
      rules: {
        title: [
          { required: true, message: '标题不能为空' },
          { max: 30, message: '最长30个字' }
        ],
        description: [
          { required: true, message: '简介不能为空' },
          { max: 50, message: '最长50个字' }
        ],
        keywords: [
          { required: true, message: '关键词不能为空' }
        ],
        logo: [
          { required: true, message: 'logo不能为空' }
        ]
      }
    }
  },
  components: {
    imageInput
  },
  async asyncData ({ store, route }) {
    const { query } = route;
    return store.dispatch('setting/view', 'basis')
  },
  computed: {
    ...mapGetters('setting', ['basis'])
  },
  async mounted () {
    this.$nextTick(() => {
      this.form = deepCopy(this.basis)
      this.form.logo = (this.form.logo === undefined || this.form.logo === '{}') ? [] : [this.form.logo]
    })
  },
  methods: {
    ...mapActions('setting', ['updateBasis']),
    handleClose (tag) {
      this.form.keywords.splice(this.form.keywords.indexOf(tag), 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      if (this.inputValue) {
        this.form.keywords.push(this.inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    async onFormSubmit () {
      await this.$refs.form.validate()
      let logo = {}
      if (this.form.logo.length) {
        const { logo: [{ id, url }] } = this.form
        logo = { id, url }
      }
      const params = { ...this.form, logo }
      await this.updateBasis(params)
      this.$message.success('保存成功')
    }
  }
}
</script>
